<template>
  <div class="input-card" v-loading="loading">
    <div
      class="card-item"
      v-for="(item, index) in cardList"
      :key="index"
      :style="{ borderColor: item.color }"
    >
      <div>{{ item.machineTypeName }}-{{ item.machineDocumentName }} </div>
      <div>{{ item.materialName }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { getWuLiaoList } from '@/api/gongGongChaXun'
  import { getJiTaiList, postXingZengJiTai } from '@/api/shengChanSheZhi'

  const props = defineProps<{
    id: string
    name: string
    code: string
  }>()

  const loading = ref(true)
  const cardList = ref<any>([])
  const getList = () => {
    getJiTaiList(props.id)
      .then((res: any) => {
        loading.value = false
        cardList.value = res.map((item) => {
          return {
            ...item,
            zuHeTitle: item.machineTypeName + '-' + item.machineDocumentName
          }
        })
      })
      .catch(() => {
        loading.value = false
      })
  }

  onMounted(() => {
    getList()
  })
</script>

<style scoped lang="scss">
  .input-card {
    display: flex;
    flex-wrap: wrap;

    .card-item {
      display: flex;
      width: 220px;
      height: 100px;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin: 10px 6px;
      border: 1px solid #34e4fd;
      border-top-width: 6px;
      border-radius: 8px;
      box-sizing: border-box;

      div {
        font-weight: bold;
        font-size: 16px;
        color: #202121;
        line-height: 26px;
      }
    }
  }
</style>
